<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ToDoList</title>
</head>
<script src="jquery.min.js"></script>
<style type="text/css">
	body{
		background-color: #cdcdcd;
		margin:0;
		padding:0;
		font-size: 16px;
	}
	input:focus,button:focus{
		outline: none;
	}
	.top{
		height:50px;
		line-height: 50px;
		background-color: #000;
		margin-bottom: 10px;	
	}
	.warp{
		width:600px;
		margin:0 auto;
		position: relative;
	}
	.logo{
		float:left;
		font-size: 24px;
		color: #ddd;
	}
	.addData{
		margin-left:50px; 
	    width: 60%;
	    height: 24px;
	    margin-top: 12px;
	    text-indent: 10px;
	    border-radius: 5px;
	    box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
	    border: none;
	}
	.setdata{
		float: right;
		border-radius: 5px;
		background:#fff;
		position: absolute;
		top:12px;
		right:2px;
		display: none;
	}
	h2{
		position: relative;
	}
	h2 .count{
		position: absolute;
	    top: 2px;
	    right: 5px;
	    display: inline-block;
	    padding: 0 5px;
	    height: 20px;
	    border-radius: 20px;
	    background: #E6E6FA;
	    line-height: 22px;
	    text-align: center;
	    color: #666;
	    font-size: 14px;
	}
	li{
		height:32px;
		line-height: 32px;
		list-style: none;
		background-color: #fff;
		border-left:5px solid #009688;
		border-radius: 5px;
		border-right: none;
		margin-top: 10px;
		position: relative;
	}
	li i{
		font-style: normal;
		position: absolute;
	    top: 2px;
	    right: 5px;
	    display: inline-block;
	    width: 14px;
	    height: 12px;
	    border-radius: 14px;
	    border: 6px double #FFF;
	    background: #CCC;
	    line-height: 14px;
	    text-align: center;
	    color: #FFF;
	    font-weight: bold;
	    font-size: 14px;
	    cursor: pointer;
	}
	#done li{
		opacity: 0.5;
	}
	.addinput{
		border:1px solid #fff;
	}
</style>

<body>
	<div class="top">
		<div class="warp">
			<span class="logo">ToDoList</span><input type="" id="addData" class="addData" placeholder="添加待办事项"><button id="setdata" class="setdata">添加</button>
		</div>
		<div class="warp">
			<h2>正在进行
				<span id="doingcount" class="count">0</span></h2>
			<ul id="doing" class="list">
			</ul>
			<h2>已经完成
				<span  id="donecount" class="count">0</span></h2>
			<ul id="done" class="list">
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		function creataitem(text){
			this.text = text;
			this.status =false;
		}
		//声明一个空数组
		var list = [];	
		
		//初始化空数组内容
		function renderlist(){
			var doing = $("#doing")
			var done = $("#done")
			var checkbox = $("#checkbox")
			doing.html("")
			done.html("")
			var count = 0;
			//循环list数组
			list.forEach(function(item,index){
				var newli = $(`<li><input type="checkbox" id="checkbox" class="checkbox"><input type="text" id="addinput" class="addinput"><i>-</i></li>`)
				newli.find(".addinput").val(item.text);
				newli.attr("index",index)	
				//根据list的.status值来判断插入位置
				if (item.status){
					count++;//记录数据传入的个数
					newli.appendTo(done)
					newli.find(".checkbox").prop("checked",true)
				}				
				else{
					newli.appendTo(doing)
				}
				//单选框的点击事件
				newli.find(".checkbox").change(function(){
					var index = $(this).closest("li").attr("index");
					list[index].status = !list[index].status
					renderlist();
				})
				//i的点击删除事件
				newli.find("i").click(function(){
					var index = $(this).closest("li").attr("index");
					list.splice(index,1)
					renderlist();
				})
			})
			//更新正在进行和已经完成的数据个数
			$("#donecount").html(count)
			$("#doingcount").html(list.length - count)
			localStorage.setItem("list",JSON.stringify(list))
		}
		var historydata = localStorage.getItem("list")
		if(historydata){
			list = JSON.parse(historydata)
			renderlist()
		}
		//键盘事件，以及声明一个对象，将文本待办事件当做对象obj的属性值给.text属性

		var input = $("#addData")
		input.keypress(function(e){
			if(e.keyCode===13 && ($(this).val())){
				list.push(new creataitem($(this).val()))
				input.val("")
				renderlist()
				// console.log(JSON.stringify(list))
			}  
		})
		
		// $("#setdata").click(function(){
			
		// })
	</script>
</body>
</html>